<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="xms">
    <meta name="author" content="Xms">
    <link rel="icon" href="/content/favicon.ico">

    <title>组织 - 安全 - 安全角色 - 按钮授权</title>

    <!-- Bootstrap core CSS -->
    <link href="/content/css/bootstrap3.3.5/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/content/css/font-awesome.min.css" rel="stylesheet">
    <link href="/content/css/common.css" rel="stylesheet">
    <link href="/content/js/jquery-toast/jquery.toast.min.css" rel="stylesheet">
    <link id="themeLink" href="/content/css/theme/default.css" rel="stylesheet"/>
    <!-- Bootstrap core JavaScript ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/content/js/jquery.min.js"></script>
    <script src="/content/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/content/js/ie10-viewport-bug-workaround.js"></script>
    <script src="/content/js/jquery.bootstrap.min.js"></script>
    <script src="/content/js/json2.js"></script>
    <script src="/content/js/xms.utility.js"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.draggable.js"></script>
    <script src="/content/js/jquery-toast/jquery.toast.min.js"></script>
    <script src="/content/js/xms.jquery.js"></script>
    <script src="/content/js/xms.web.js"></script>
    <script src="/content/js/commonlabels.js"></script>
    <script src="/content/js/common/pagecontext.js"></script>
    <script src="/api/user/usercontext"></script>
    <script>
        jQuery(function () {
            Xms.Web.Loading();
            if (typeof parent !== 'undefined') {
                if (parent != window) {//判断当前页面是否为子页面
                    $('body').addClass('xms-subpage');
                }
            }
        });

        function changeTheme(body, themename) {
            $("#themeLink").attr('href', '/content/css/theme/' + themename + '.css');
        }
    </script>
    <style>
        .form-group input[type="checkbox"] {
            margin-left: -20px;
            margin-top: 0;
        }

        .checkbox label, .radio label {
            padding-left: 28px;
        }
    </style>
    <style>
        body {
            padding-top: 0;
        }
    </style>
</head>

<body data-spy="scroll" data-target="#myScrollspy">
<div class="container-fluid" id="body">
    <div class="row">
        <div class="shadeBox"
             style="background-color:#000000; opacity:0.5;width:100%;position:absolute;z-index:10;display:none;"></div>
        <div class="col-md-12" id="main" style="margin-bottom:80px;">
            <div><br class="breadcrumb"/></div>
            <div id="content"></div>
            <div class="page-render-wrap">
                <!--main-->

                <div class="container-fluid">
                    <div class="row" style="padding:5px 0px;">
                        <div class="col-sm-11 btn-group" id="owners">
                            <button type="button" class="btn btn-sm btn-default">类型：</button>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse"
                               href="#collapseTwo">
                                <strong id="rolename" class="text-primary"></strong> - <strong>按钮授权</strong>
                            </a>
                        </h3>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse in">
                        <div class="panel-body" style="min-height:400px;">
                            <form id="editform" class="form-horizontal" data-jsonajax="true" data-istip="true"
                                  action="/xms/api/security/roleobjectaccess/save" method="post">
                                <input id="RoleId" name="RoleId" type="hidden"/>
                                <input id="ResourceName" name="ResourceName" type="hidden"/>
                                <div class="form-group col-sm-12">
                                    <div class="table-responsive" style="min-height:400px;">
                                        <table class="table table-bordered table-condensed" id="entities">
                                            <thead class="table-header">
                                            <tr>
                                                <th class="xms-checker" checkertype="all">
                                                    <div class="btn"><strong>实体</strong></div>
                                                </th>
                                                <th class="xms-checker" checkertype="cum">
                                                    <div class="btn"><strong>表单</strong></div>
                                                    <div class="pull-right" id="mask_dropdownmenu_7">
                                                        <div class="dropdown">
                                                            <button type="button" class="btn btn-link dropdown-toggle"
                                                                    id="mask_dropdownbtn" data-toggle="dropdown"
                                                                    aria-expanded="true">
                                                                <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu pull-right" role="menu"
                                                                aria-labelledby="mask_dropdownbtn">
                                                                <li role="presentation">
                                                                    <a role="menuitem" tabindex="-1" href="javascript:;"
                                                                       onclick="tablecheckCol(this,true,true)">全选</a>
                                                                </li>
                                                                <li role="presentation">
                                                                    <a role="menuitem" tabindex="-1" href="javascript:;"
                                                                       onclick="tablecheckCol(this,true,false)">全不选</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th class="xms-checker" checkertype="cum">
                                                    <div class="btn"><strong>列表头部</strong></div>
                                                    <div class="pull-right" id="mask_dropdownmenu_7">
                                                        <div class="dropdown">
                                                            <button type="button" class="btn btn-link dropdown-toggle"
                                                                    id="mask_dropdownbtn" data-toggle="dropdown"
                                                                    aria-expanded="true">
                                                                <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu pull-right" role="menu"
                                                                aria-labelledby="mask_dropdownbtn">
                                                                <li role="presentation">
                                                                    <a role="menuitem" tabindex="-1" href="javascript:;"
                                                                       onclick="tablecheckCol(this,true,true)">全选</a>
                                                                </li>
                                                                <li role="presentation">
                                                                    <a role="menuitem" tabindex="-1" href="javascript:;"
                                                                       onclick="tablecheckCol(this,true,false)">全不选</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th class="xms-checker" checkertype="cum">
                                                    <div class="btn"><strong>列表行内</strong></div>
                                                    <div class="pull-right" id="mask_dropdownmenu_7">
                                                        <div class="dropdown">
                                                            <button type="button" class="btn btn-link dropdown-toggle"
                                                                    id="mask_dropdownbtn" data-toggle="dropdown"
                                                                    aria-expanded="true">
                                                                <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu pull-right" role="menu"
                                                                aria-labelledby="mask_dropdownbtn">
                                                                <li role="presentation">
                                                                    <a role="menuitem" tabindex="-1" href="javascript:;"
                                                                       onclick="tablecheckCol(this,true,true)">全选</a>
                                                                </li>
                                                                <li role="presentation">
                                                                    <a role="menuitem" tabindex="-1" href="javascript:;"
                                                                       onclick="tablecheckCol(this,true,false)">全不选</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th class="xms-checker" checkertype="cum">
                                                    <div class="btn"><strong>单据体</strong></div>
                                                    <div class="pull-right" id="mask_dropdownmenu_7">
                                                        <div class="dropdown">
                                                            <button type="button" class="btn btn-link dropdown-toggle"
                                                                    id="mask_dropdownbtn" data-toggle="dropdown"
                                                                    aria-expanded="true">
                                                                <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu pull-right" role="menu"
                                                                aria-labelledby="mask_dropdownbtn">
                                                                <li role="presentation">
                                                                    <a role="menuitem" tabindex="-1" href="javascript:;"
                                                                       onclick="tablecheckCol(this,true,true)">全选</a>
                                                                </li>
                                                                <li role="presentation">
                                                                    <a role="menuitem" tabindex="-1" href="javascript:;"
                                                                       onclick="tablecheckCol(this,true,false)">全不选</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody class="table-body"></tbody>
                                        </table>
                                    </div>
                                </div>
                                <!--<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"
                                     id="body-footer">
                                    <div class="navbar-form navbar-right" id="form-buttons"
                                         style="display:inline-block!important;">
                                        <button type="submit" class="btn btn-primary"><span
                                                class="glyphicon glyphicon-saved"></span> 保存
                                        </button>
                                        <button type="reset" class="btn btn-default"><span
                                                class="glyphicon glyphicon-refresh"></span> 重置
                                        </button>
                                    </div>
                                </nav>-->
                            </form>
                        </div>
                    </div>
                </div>

            </div>
            <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation" id="body-footer">
                <div class="container">
                    <div class="navbar-form navbar-right" id="body-footer-content">
                        <button type="button" id="save_button" class="btn btn-primary"><span
                                class="glyphicon glyphicon-saved"></span> 保存
                        </button>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</div>

<script src="/content/js/xms.utility.js"></script>
<script src="/content/js//jquery-validate/jquery.validate.min.js"></script>
<script src="/content/js/jquery.form.js"></script>
<script src="/content/js/xms.web.js"></script>
<script src="/content/js/xms.jquery.js"></script>
<script src="/content/js/knockout-2.2.0.js"></script>
<script src="/content/js/icheck/icheck.min.js"></script>
<script src="/content/js/xms.metadata.js"></script>
<script>
    var model = $.urlParamObj(location.href);
    var ObjectId = [];
    var typecode = 8;
    var entities = [];
    $(function () {
        $('#RoleId').val(model.roleid);
        $('#ResourceName').val(model.resourcename);
        bindEntities(function(data){
            bindObject(function(){
                bindButtons(data);
            });
        });
        loadResourceOwners();
        getRoleInfo();
        $('#save_button').on('click', function(){$("#editform").submit();});
        $("#editform").submit(function () {
            var data = {};
            data.roleid = model.roleid;
            data.resourcename = model.resourcename;
            data.items = [];
            $('#entities').find('input[name=objectid]').each(function(i, n){
                var $objectid_input = $(n);
                if($(n).prop('checked')) {
                    data.items.push({objectid: $objectid_input.val()});
                }
            });
            console.log('post data', data);
            Xms.Web.Post('/api/security/roleobjectaccess/save', data, false, function(response){
                Xms.Web.Alert(response.IsSuccess, response.Content || response.ErrorMessage);
            }, null, true, false);
            return false;
        });
    });

    function getRoleInfo() {
        Xms.Web.GetJson('/api/security/role/getbyid/' + model.roleid, null, function (data) {
            if (!data.IsSuccess || !data.Content) {
                Xms.Web.FailureHandler(data);
                return;
            }
            data = data.Content;
            $('#rolename').text(data.name);
        });
    }

    function loadResourceOwners() {
        Xms.Web.GetJson(ORG_SERVERURL + "/api/security/resourceowners", null, function (data) {
            if (!data.IsSuccess) return;
            var items = data.Content;
            var resourceName = $('#ResourceName').val().toLowerCase();
            var $container = $('#owners');
            $(items).each(function (i, n) {
                if (!n.statecode) return true;
                var url = (n.uiendpoint || '/security/editrolepermission') + '?roleid=' + $("#RoleId").val() + '&resourcename=' + n.modulename;
                $container.append($('<button type="button" class="btn btn-sm ' + (resourceName == n.modulename.toLowerCase() ? 'btn-info' : 'btn-default') + '" data-url="' + url + '">' + (n.modulelocalizedname || n.modulename) + '</button>'));
            });
            $container.find('button').on('click', null, function () {
                Xms.Web.Redirect($(this).attr('data-url'));
            });
        });
    }

    function bindEntities(callback) {
        Xms.Schema.GetEntities({getall: true}, function (data) {
            entities = data;
            if (data && data.length > 0) {
                callback && callback(data);
            }
        });
    }

    function filterButtons(datas) {
        var res = [];
        $.each(datas, function (i, n) {
            if (n.children && n.children.length > 0) {
                $.each(n.children, function (ii, nn) {
                    var showarea = 0;
                    if (nn.label == '表单') {
                        showarea = 1;
                    } else if (nn.label == '列表头部') {
                        showarea = 2;
                    } else if (nn.label == '列表行内') {
                        showarea = 3;
                    } else if (nn.label == '单据体') {
                        showarea = 4;
                    }
                    if (nn.children && nn.children.length > 0) {
                        $.each(nn.children, function (iii, nnn) {
                            nnn.showarea = showarea;
                            res.push(nnn);

                        });
                    }
                });
            }
        });
        return res;
    }

    function bindButtons() {
        Xms.Ajax.GetJson('/api/ribbonbutton/privilegeresource?authorizationenabled=true', null, function (response) {
            if (response.IsSuccess) {
                var data = response.Content;
                var tb = $('#entities');
                var tbody = tb.find('tbody');
                tbody.html();
                if (entities && entities.length == 0) {
                    tbody.append('<tr><td colspan="5" style="font-size:18px; text-align:center;">没有数据</td></tr>');
                    return false;
                }
                allbuttons = [];
                $(entities).each(function (i, entity) {
                    var buttons = $.grep(data, function (n, j) {
                        return n.groupid == entity.entityid;
                    });
                    console.log(entity.localizedname, buttons);
                    if (buttons && buttons.length > 0) {
                        allbuttons.push(buttons);
                    }
                    if (!buttons || buttons.length == 0) return true;
                    var html = "<tr>";
                    var FormButton = "<td>";
                    var ListHeadButton = "<td>";
                    var ListRowButton = "<td>";
                    var SubGridButton = "<td>";
                    buttons = filterButtons(buttons);
                    if (buttons && buttons.length > 0) {
                        html += '<td class="xms-checker" checkertype="col" data-name="' + entity.name + '">';
                        html += '<label class="btn"><strong>' + entity.localizedname + '</strong></label>';
                        html += '</td>';
                        $(buttons).each(function (j, button) {
                            var flag = button.id ? ($.inArray(button.id, ObjectId) != -1) : false;
                            if (button.showarea == 1) {
                                FormButton += '<div class="checkbox">';
                                FormButton += '<label for="ribbonbtn' + i + '_' + j + '"> ' + '<input type="checkbox" id="ribbonbtn' + i + '_' + j + '" name="objectid" value="' + button.id + '" ' + (flag ? " checked" : "") + ' /> ';
                                FormButton += button.label + '</label>';
                                FormButton += '</div>';
                            } else if (button.showarea == 2) {
                                ListHeadButton += '<div class="checkbox">';
                                ListHeadButton += '<label for="ribbonbtn' + i + '_' + j + '"> ' + '<input type="checkbox" id="ribbonbtn' + i + '_' + j + '" name="objectid" value="' + button.id + '" ' + (flag ? " checked" : "") + ' /> ';
                                ListHeadButton += button.label + '</label>';
                                ListHeadButton += '</div>';
                            } else if (button.showarea == 3) {
                                ListRowButton += '<div class="checkbox">';
                                ListRowButton += '<label for="ribbonbtn' + i + '_' + j + '"> ' + '<input type="checkbox" id="ribbonbtn' + i + '_' + j + '" name="objectid" value="' + button.id + '" ' + (flag ? " checked" : "") + ' /> ';
                                ListRowButton += button.label + '</label>';
                                ListRowButton += '</div>';
                            } else if (button.showarea == 4) {
                                SubGridButton += '<div class="checkbox">';
                                SubGridButton += '<label for="ribbonbtn' + i + '_' + j + '"> ' + '<input type="checkbox" id="ribbonbtn' + i + '_' + j + '" name="objectid" value="' + button.id + '" ' + (flag ? " checked" : "") + ' /> ';
                                SubGridButton += button.label + '</label>';
                                SubGridButton += '</div>';
                            }
                        });

                        if (FormButton.indexOf("div") == -1) {
                            FormButton += '<div>';
                            FormButton += '<label for="Name">-</label>';
                            FormButton += '</div>';
                        }
                        if (ListHeadButton.indexOf("div") == -1) {
                            ListHeadButton += '<div>';
                            ListHeadButton += '<label for="Name"> -</label>';
                            ListHeadButton += '</div>';
                        }
                        if (ListRowButton.indexOf("div") == -1) {
                            ListRowButton += '<div>';
                            ListRowButton += '<label for="Name">-</label>';
                            ListRowButton += '</div>';
                        }
                        if (SubGridButton.indexOf("div") == -1) {
                            SubGridButton += '<div>';
                            SubGridButton += '<label for="Name">-</label>';
                            SubGridButton += '</div>';
                        }
                        FormButton += '</td>';
                        ListHeadButton += '</td>';
                        ListRowButton += '</td>';
                        SubGridButton += '</td></tr>';
                        tbody.append(html + FormButton + ListHeadButton + ListRowButton + SubGridButton);

                    }

                });
                if (allbuttons && allbuttons.length == 0) {
                    tbody.append('<tr><td colspan="5" style="font-size:18px;text-align:center;">没有数据</td></tr>');

                    return false;
                }
                //tbody.find('input[type="checkbox"]').iCheck({
                //    checkboxClass: 'icheckbox_minimal-blue',
                //    radioClass: 'iradio_minimal-blue',
                //    increaseArea: '10%'
                //})
                bindEvent(tb);
            }
        });
    }

    function bindObject(callback) {
        Xms.Ajax.GetJson('/api/security/roleobjectaccess/list?roleid=' + $('#RoleId').val() + '&typecode='+typecode+'&resourcename=' + $('#ResourceName').val(), null, function (d) {
            console.log(d);
            $(d.Content).each(function(i, n){
                ObjectId.push(n.objectid);
            });

            callback && callback(ObjectId);
        });
    }

    function tablecheckCol(target, auto, flag) {
        var $this = $(target), $table = $this.parents('table:first');
        var $td = null;
        if ($this.get(0).tagName == 'th') {
            $td = $this;
        } else {
            $td = $this.parents('th:first');
        }
        var index = $td.index();
        var $tbody = $table.find('tbody');
        if (!auto) {
            var checked = $td.attr('data-checked');

            if (!checked || checked == '0') {
                $td.attr('data-checked', 1);
                $tbody.find('tr').each(function () {
                    var checks = $(this).find('td').eq(index).find('input[type="checkbox"]');
                    if (checks.length > 0) {
                        checks.prop('checked', true);
                        // checks.each(function () {
                        //     $(this).iCheck('check');
                        // })
                    }
                });
            } else {
                $td.attr('data-checked', 0);
                $tbody.find('tr').each(function () {
                    var checks = $(this).find('td').eq(index).find('input[type="checkbox"]');
                    if (checks.length > 0) {
                        checks.prop('checked', false);
                        //  checks.iCheck('uncheck');
                    }
                });
            }
        } else {
            if (flag) {
                $td.attr('data-checked', 1);
                $tbody.find('tr').each(function () {
                    var checks = $(this).find('td').eq(index).find('input[type="checkbox"]');
                    if (checks.length > 0) {
                        checks.prop('checked', true);
                        // checks.iCheck('check');
                    }
                });
            } else {
                $td.attr('data-checked', 0);
                $tbody.find('tr').each(function () {
                    var checks = $(this).find('td').eq(index).find('input[type="checkbox"]');
                    if (checks.length > 0) {
                        checks.prop('checked', false);
                        //  checks.iCheck('uncheck');
                    }
                });
            }
        }
    }

    function tablecheckRow(target, auto, flag) {
        var $this = $(target), $table = $this.parents('table:first');
        var $td = null;
        if ($this.get(0).tagName == 'td') {
            $td = $this;
        } else {
            $td = $this.parents('td:first');
        }
        var $tr = $td.parents('tr:first');
        var checked = $td.attr('data-checked');
        if (!auto) {
            if (!checked || checked == '0') {
                $td.attr('data-checked', 1);
                var checks = $tr.find('input[type="checkbox"]');
                if (checks.length > 0) {
                    checks.prop('checked', true);
                    //  checks.iCheck('check');
                }
            } else {
                $td.attr('data-checked', 0);
                var checks = $tr.find('input[type="checkbox"]');
                if (checks.length > 0) {
                    checks.prop('checked', false);
                    //  checks.iCheck('uncheck');
                }
            }
        } else {
            if (flag) {
                $td.attr('data-checked', 1);
                var checks = $tr.find('input[type="checkbox"]');
                if (checks.length > 0) {
                    checks.prop('checked', true);
                    // checks.each(function () {
                    //     $(this).iCheck('check');
                    // })
                }
            } else {
                $td.attr('data-checked', 0);
                var checks = $tr.find('input[type="checkbox"]');
                if (checks.length > 0) {
                    checks.prop('checked', false);
                    //   checks.iCheck('uncheck');
                }
            }
        }
    }

    function bindEvent($tb) {
        var $th = $tb.find('.table-header');
        var $tbody = $tb.find('.table-body');
        $tbody.find('tr').each(function () {
            var html = $('#toggleTmpl').html();
            $(this).find('td').eq(0).append($(html));
        });
    }
</script>
<script type="text/html" id="toggleTmpl">
    <div class="pull-right" id="mask_dropdownmenu_7">
        <div class="dropdown">
            <button type="button" class="btn btn-link dropdown-toggle" id="mask_dropdownbtn" data-toggle="dropdown"
                    aria-expanded="true">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu pull-right" role="menu" style="width:100px;    min-width: 100px;"
                aria-labelledby="mask_dropdownbtn">
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="javascript:;" onclick="tablecheckRow(this,true,true)">全选</a>
                </li>
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="javascript:;"
                       onclick="tablecheckRow(this,true,false)">全不选</a>
                </li>
            </ul>
        </div>
    </div>
</script>
</body>
</html>